/** * Created by OXOYO on 2018/3/26. * * */

<style scoped lang="less" rel="stylesheet/less">
.handler {
  display: inline-block;
  position: absolute;
  background: #ffffff;
  border: 1px solid #dddddd;
  overflow: hidden;
  transition: all 0.2s ease-in 0.1s;
  cursor: pointer;

  &:hover {
    background: #dddddd;
  }

  &.horizontal {
    width: 20px;
    height: 20px;
    line-height: 20px;
    left: 50%;
    margin-left: -10px;
  }
  &.vertical {
    width: 20px;
    height: 20px;
    line-height: 20px;
    top: 50%;
    margin-top: -10px;
  }

  &.top {
    top: -11px;
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.1);
  }
  &.right {
    right: -11px;
    border-left: none;
    border-radius: 0 20px 20px 0;
    box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.1);
  }
  &.bottom {
    bottom: -11px;
    border-top: none;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
  }
  &.left {
    left: -11px;
    border-right: none;
    border-radius: 20px 0 0 20px;
    box-shadow: -2px 0 2px 0 rgba(0, 0, 0, 0.1);
  }
  &.expand {
    &.top {
      margin-top: 0;
    }
    &.right {
      margin-right: 0;
    }
    &.bottom {
      margin-bottom: 0;
    }
    &.left {
      margin-left: 0;
    }
  }
}
</style>

<template>
  <div :class="className" @click="toggleHandler"></div>
</template>

<script lang="ts">
import { Tsrv, T_srv, ts, ifs, vue } from '@/services';

@T_srv.comp
export default class oCardBoxHandler extends vue {
  // handler 模式
  @T_srv.prop({
    type: String,
    default: 'vertical',
    validator: val => {
      return ['horizontal', 'vertical'].includes(val);
    }
  })
  mode: string;

  @T_srv.prop({
    type: String,
    default: 'right',
    validator: val => {
      return ['top', 'right', 'bottom', 'left'].includes(val);
    }
  })
  position: string;

  @T_srv.prop({ type: Boolean, default: true }) expand: boolean;

  /* 父组件compBoxInfo */
  @T_srv.prop({
    required: false,
    type: Object,
    default: null
  })
  compBoxInfo: ifs.I_compBoxInfo;

  private G_compName: string = 'oCardBoxHandle';

  private GT_compBoxInfo: ifs.I_compBoxInfo;

  private GT_compBox: ifs.I_compBox;

  private G_compID: string;

  get className() {
    return ['handler', this.mode, this.position, this.expand ? 'expand' : ''];
  }

  created() {
    this.G_compID = Tsrv.utils.getGUID();
    /* 如果外部有传入组件信息 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox = new ts.T_compBox(this.G_compID); // 使用本地实例
    } else {
      this.G_compID = this.compBoxInfo.compID;
      this.GT_compBox = this.compBoxInfo.TcompBox;
    }
    this.GT_compBoxInfo = { compID: this.G_compID, TcompBox: this.GT_compBox };
  }

  mounted() {
    /* 向父组件发送实例 */
    this.$emit('compBoxInfo', this.GT_compBoxInfo);
    this.GT_compBox.addCompMergeName(this.G_compID, this.G_compName, this);

    /* 最终应用组件向外抛出引用实例,以供应用间调用 */
    // Tsrv.compBox.addCompMergeName(
    //   Tsrv.compBox.getDefGUID(), // 全局compBox
    //   '????',
    //   this,
    //   '???'
    // );
  }

  destroyed() {
    /* 注册组件销毁 */
    this.GT_compBox.removeCompMergeName(this.G_compID, this.G_compName);

    /* 最终应用组件销毁 */
    /* this.GT_compBox.removeCompMergeName(this.G_compID, 'devBom','funName'); */

    /* 如果父组件传入的compBoxInfo则删除本文件产生的引用,反之是本组件产生的ID统一删除 */
    if (Tsrv.utils.isEmpty(this.compBoxInfo)) {
      this.GT_compBox.removeCompsWithCompID(this.G_compID);
    } else {
      this.GT_compBox.removeCompsMergeName(this.G_compID, [
        `'${this.G_compName}'`
      ]);
    }
  }

  // 切换handler显示/隐藏
  toggleHandler() {
    this.GT_compBox.getCompMergeName(this.G_compID, 'oCardBox').toggleHandler();
  }
}
</script>
